import React, { Component } from 'react'
import {View, Image, Text, TextInput, Button,TouchableOpacity, ImageBackground, AsyncStorageStatic} from 'react-native'
import DatePicker from 'antd-mobile-rn/lib/date-picker';
import List from 'antd-mobile-rn/lib/list'
import Picker from'antd-mobile-rn/lib/picker'
import {request} from '../network/request'
import {inject, observer} from 'mobx-react'
import Storage from 'react-native-storage'

@inject('RootStore')
@observer
export default class Person extends Component {
  constructor(props){
    super(props)
    this.state ={
      name:'',
      age:'',
      date:'',
      location:'',
      hobbies:'',
      visible:false,
      pickerValue:'',
      img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605172309429&di=316821d2fcb66fe3fef57549d7516734&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F16%2F20200616131806_tRhNi.thumb.400_0.jpeg'
      // img_woman:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605172356558&di=a80b6b3bef4c0925e405c03f49e43626&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-bca2e9c7d5a14a9f3435e7f6ecdcb7d6_hd.jpg'
    }
  }
  handTijiao = () => {
    request({
      url:'/addUser',
      method:'post',
      data:{
        name:this.state.name,
        age:this.state.age,
        location:this.state.location,
        hobbies:this.state.hobbies,
        img:this.state.img
      } 
    }).then(res => {
      console.log(res)
      //把token值存入mobx
      this.props.RootStore.updateToken(res.headers.token)
      //把token存在本地
      global.storage.save({
        key:'token',
        data: res.headers.token,
        expires: null
      });
      this.props.navigation.navigate('Home');
      // console.log(this.props.RootStore.token)
    }).catch(err => {
      console.log(err)
    })
  }
  handMan = () => {
    console.log(2)
  }
  handName= (value) => {
    this.setState({
      name:value
    })
  
  }
  handAge = (date) => {
    let year = parseInt(date.toLocaleString());
    let year_now = new Date().getFullYear();
    let age = Number(year_now) - year
    this.setState({
      date:date,
      age: age
    })
  }
  handCity = (res) => {
    console.log(res)
    this.setState({
      pickerValue:res,
      location:res[0]+'-'+res[1]
    })
  }
  handHobbies= (value) => {
    this.setState({
      hobbies:value
    })
  }

  render() {
    return (
      <View>
        <View style={{height:200,justifyContent:'space-between'}}>
          <Image source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1605454671792&di=02d52ea8c8a0ffa6bec5a9792f493b2b&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F05%2F65%2F11%2F695b6cf0ea7f105.jpg'}}
            style={{height:200,height:'100%'}}
          ></Image>
          <View style={{height:'100%',position:'absolute',width:'100%'}}>
            <Text style={{fontSize:25,color:'black',textAlign:'center',marginTop:75,color:'#fff'}}>欢迎使用心相印</Text>

          </View>
        </View>
        <View style={{paddingLeft:20,paddingRight:20,marginTop:0,backgroundColor:'white',paddingBottom:20}}>
        
          <TextInput style={{borderBottomWidth:1,borderBottomColor:'grey',marginBottom:20}}
              placeholder="昵称"
              maxLength={11}
              onChangeText={this.handName}
          ></TextInput>
           <View style={{borderBottomWidth:1,borderBottomColor:'grey'}} >
              <DatePicker
                mode="date"
                title="选择出生生日期"
                extra="请选择"
                value={this.state.date}
                onChange={this.handAge}
                
              >
                <List.Item arrow="horizontal"><Text style={{color:'grey',marginLeft:-10}}>生日</Text></List.Item>
              </DatePicker>
            </View>
            <View style={{borderBottomWidth:1,borderBottomColor:'grey',marginTop:20}}>
              <Picker
                visible={this.state.visible}
                data={province}
                value={this.state.pickerValue}
                onChange={this.handCity}
                onOk={() => this.setState({ visible: false })}
                onDismiss={() => this.setState({ visible: false })}
              >
                <List.Item  onClick={() => this.setState({ visible: true })} arrow="horizontal">
                  <Text style={{color:'grey',marginLeft:-10}}>城市</Text>
                </List.Item>
            </Picker>
          </View>
          <TextInput style={{borderBottomWidth:1,borderBottomColor:'grey',marginBottom:25,marginTop:20}}
              placeholder="爱好"
              
              onChangeText={this.handHobbies}
          ></TextInput>
          
          <View style={{}}>
            <Button title="提交" onPress={this.handTijiao}></Button>
          </View>
        </View>
        
      </View>
    )
  }
}


const province = [
  {
    label: '北京',
    value: '北京',
    children: [
      {
        label: '东城区',
        value: '东城区',
      },
      {
        label: '西城区',
        value: '01-2',
      },
      {
        label: '崇文区',
        value: '01-3',
      },
      {
        label: '宣武区',
        value: '01-4',
      },
    ],
  },
  {
    label: '浙江',
    value: '02',
    children: [
      {
        label: '杭州',
        value: '02-1',
      },
      {
        label: '宁波',
        value: '02-2',

      },
      {
        label: '温州',
        value: '02-3',
      },
      {
        label: '嘉兴',
        value: '02-4',
      },
      {
        label: '湖州',
        value: '02-5',
      },
      {
        label: '绍兴',
        value: '02-6',
      },
    ],
  },
];